<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2017011101</title>
    <script src="./jquery-2.1.4/jquery.min.js"></script>
    <script src="./croppie.min.js"></script>
    <link rel="stylesheet" href="./croppie.css">
    <link rel="stylesheet" href="./caijian.css">
    <script type="text/javascript">
        $(function(){
            var $uploadCrop;

            function readFile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $uploadCrop.croppie('bind', {
                            url: e.target.result
                        });
                    }

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    alert("Sorry - you're browser doesn't support the FileReader API");
                }
            }

            $uploadCrop = $('#upload-demo').croppie({
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'circle'
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });

            $('#upload').on('change', function () {
                $(".crop").show();
                readFile(this);
            });
            $('.upload-result').on('click', function (ev) {
                $uploadCrop.croppie('result', 'canvas').then(function (resp) {
                    popupResult({
                        src: resp
                    });
                });
            });

            function popupResult(result) {
                var html;
                if (result.html) {
                    html = result.html;
                }
                if (result.src) {
                    html = '<img src="' + result.src + '" />';
                }
                $("#result").html(html);
            }
        });
    </script>


</head>
<body>

<div class="actions">
    <button class="file-btn">
        <span>上传</span>
        <input type="file" id="upload" value="选择图片文件" />
    </button>
    <div class="crop">
        <div id="upload-demo"></div>
        <button class="upload-result">裁剪</button>
    </div>
    <div id="result"></div>
</div>


<!--<div class=""></div>-->






</body>

</html>